<template>
  <div>
    <el-header class="header">
      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
    </el-header>
	
	<el-main>
		<el-card class="withdraw-card">
		  <el-form :model="form" class="withdraw-form">
		    <el-form-item label="提现卡号">
		      <el-select v-model="form.cardNumber" placeholder="请选择提现卡号" class="input-field">
		        <el-option
		          v-for="card in cardList"
		          :key="card.id"
		          :label="card.cardNumber"
		          :value="card.cardNumber"
		        />
		      </el-select>
		    </el-form-item>
		    <el-form-item label="提现金额">
		      <el-input v-model="form.amount" type="number" placeholder="请输入提现金额" class="input-field"></el-input>
		    </el-form-item>
		    <el-form-item label="提现到">
		      <el-select v-model="form.receiver" placeholder="请选择收款方" class="input-field">
		        <el-option label="微信" value="wechat" />
		        <el-option label="其它" value="other" />
				<el-option label="其它" value="other" />
		      </el-select>
		    </el-form-item>
		    <el-form-item>
		      <el-button type="primary" @click="handleWithdraw">确认提现</el-button>
		    </el-form-item>
		  </el-form>
		  <el-dialog
		    title="输入密码"
		    :visible.sync="passwordDialogVisible"
		    width="30%"
		    @close="resetForm"
		  >
		    <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="passwordDialogVisible = false">取消</el-button>
		      <el-button type="primary" @click="confirmWithdraw">确认</el-button>
		    </div>
		  </el-dialog>
		</el-card>
	</el-main>
	
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 从后台获取卡号数据
const getCardList = async () => {

}

// 表单数据
const form = reactive({
  cardNumber: '',
  amount: '',
  receiver: '',
  password: ''
})

// 提现卡号列表
const cardList = ref([])

// 控制密码输入框的显示
const passwordDialogVisible = ref(false)

// 获取卡号列表
onMounted(async () => {
  cardList.value = await getCardList()
})

// 验证提现金额和卡号余额
const checkBalance = async (cardNumber, amount) => {
   // 模拟卡号余额为1000
  // const balance = 1000
  // return amount <= balance
}

const handleWithdraw = async () => {
  if (!form.cardNumber || !form.amount || !form.receiver) {
    ElMessage.error('请完整填写表单')
    return
  }
  
// 提现金额与卡余额比较
  const isValid = await checkBalance(form.cardNumber, form.amount)
  if (isValid) {
    passwordDialogVisible.value = true
  } else {
    ElMessage.error('提现金额超过余额')
  }
}

//密码验证及处理提现请求
const confirmWithdraw = async () => {
  if (!form.password) {
    ElMessage.error('请输入密码')
    return
  }

  //  这里模拟提交提现请求
  // ElMessage.success('提现成功')
  // 提现成功后隐藏密码输入框
  passwordDialogVisible.value = false
  // 重置表单
  resetForm()
}
// 重置表单
const resetForm = () => {
  form.cardNumber = ''
  form.amount = ''
  form.receiver = ''
  form.password = ''
}

const goBack = () => {
  // 实现返回功能，使用 vue-router 进行导航
  // window.history.back()
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}
/* 卡片样式 */
.withdraw-card {
  max-width: 800px;
  margin: 100px auto;
  padding: 40px;
}

.withdraw-form .input-field {
  width: 100%;
}
</style>
